<template>

  <div style="margin-left: 120px" >
    <el-carousel indicator-position="outside" style="position: relative; width: 1000px;" height="550px" >
      <el-carousel-item v-for="img in imgs" :key="img">
        <div style="color: #000000;text-align: center;overflow: hidden;width: 100%;">
          <img  style="width: 100%; height: auto;" :src="img"/>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="colblock cl">
      <div style="background-color: #3b6496 !important;
      color: #e1dfdb !important;">
      <h2>
        <span class="l">通告栏</span>
        <span class="r more">
          <el-link href="" target="_blank" style="color: #e1dfdb !important;">更多</el-link></span>
      </h2>
      </div>
      <div class="colcontent cl">
        <div class="block_list">
          <div class="b_list">
            <ul class="cl">
              <li v-for="param in AnnounceData" :key="param.title">
                <el-link @click="LookAnnounce(param.link)" target="_blank" :title=param.title>{{"【"+param.time+"】"+param.title}}</el-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  //考生成功后的首页
  name: "SuccessIndex",
  data(){
    return {
      AnnounceData:[],
      imgs:[
          "http://statics.scnu.edu.cn/pics/computer/2021/0702/1625196420578433.png",
          "http://statics.scnu.edu.cn/pics/computer/2021/0702/1625193805231769.jpg",
          "http://statics.scnu.edu.cn/pics/computer/2021/0701/1625132852126134.jpg",
          "http://statics.scnu.edu.cn/pics/computer/2021/0702/1625194309419430.jpg",
      ]
    }
  },
  mounted() {
    this.GetAnnounce();
  },
  methods:{
    GetAnnounce(){
      this.axios.post("showannounce"
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          //this.tableData = response.data["announce"]
          this.AnnounceData = []
          //最多显示五条
          let length = response.data["announce"].length ;
          if( length > 5 )  length = 5;

          for( let i = 0 ; i < length ;  i++ ) {
            this.AnnounceData.push({
              title: response.data["announce"][i]['title'],
              time: response.data["announce"][i]['time'],
              link:"/announcement?title="+response.data["announce"][i]['title']+"&time="+ response.data["announce"][i]['time'],
            })
          }
        }
      })
    },
    LookAnnounce(link){
      this.$router.push(link);
    },
  }
}
</script>

<style scoped>
#main {
  float: left;
  width: 680px;
}
.colblock h2 .more {
  line-height: 20px;
}
.r {
  float: right;
}
.colblock {

  background-color: rgb(224, 223, 220);
  background-image: none;
  border-color: rgb(200, 196, 192);
}
.colblock {
  margin-bottom: 25px;
  overflow: hidden;
  font-family: Microsoft Yahei;
  background: #FFF;
  background-color: rgb(255, 255, 255);
  background-image: none;
  border: solid #dedede;
  border-top-color: rgb(222, 222, 222);
  border-top-width: medium;
  border-right-color: rgb(222, 222, 222);
  border-right-width: medium;
  border-bottom-color: rgb(222, 222, 222);
  border-bottom-width: medium;
  border-left-color: rgb(222, 222, 222);
  border-left-width: medium;
  border-width: 0 1px 1px;
  border-radius: 4px;
}
.cl {
  zoom: 1;
}
</style>